<template>
	<div class="search-box">
		<div class="row">
			<div class="mb-3 col-auto">
				<input type="text" class="form-control" 
					:placeholder="$t('runId')" 
					v-model="conditions.id" @keyup.enter="search">
			</div>

			<div class="mb-3 col-auto">
				<input type="text" class="form-control" 
					:placeholder="$t('username')" 
					v-model="conditions.username" @keyup.enter="search">
			</div>


			<div class="mb-3 col-auto" v-if="problems">
				<select class="form-select" v-model="conditions.problemId">
					<option value="" selected>
						{{ $t('all_problem') }}
					</option>

					<option v-for="item in problems" :value="item.id">
						{{ item.finalTitle }}
					</option>
				</select>
			</div>

			<div class="mb-3 col-auto" v-else>
				<input type="text" class="form-control" 
					:placeholder="$t('problem.id')" 
					v-model="conditions.problemId" @keyup.enter="search">
			</div>


			<div class="mb-3 col-auto">
				<select class="form-select" v-model="conditions.result">
					<option value="" selected>
						{{ $t('all_result') }}
					</option>

					<option v-for="(item, key) in resultMapping"
							:key="key" :value="key" v-once>
						{{ $t('result.' + item.name) }}
					</option>
				</select>
			</div>

			<div class="mb-3 col-auto">
				<select class="form-select" v-model="conditions.language">
					<option value="" selected>
						{{ $t('all_language') }}
					</option>

					<option v-for="item in languages" :value="item.id">
						{{ item.lang }}
					</option>
				</select>
			</div>

			<div class="mb-3 col-auto">
				<button class="btn btn-success" @click="search">
					{{ $t('search') }}
				</button>
			</div>
		</div>
	</div>


	<StatusList :status="solutions" :contest-id="contestId" :id-attr="idAttr" />


	<Pagination v-if="showPagination" :page-info="pageInfo" :get-page-url="getPageUrl" />
</template>


<script type="module">
	import Pagination from '@/components/Pagination.vue';
	import StatusList from '@/components/StatusList.vue';
	import {ConfigService, StatusService, ContestStatusService, ProblemService, Router} from '@/common/common.object'
	import { pageInfo } from '@/common/pagination';

	export default {
		props:['problems', 'idAttr', 'showPagination'],
		data() {
			return {
				contestId: null,
				solutions: null,
				pageInfo: null,

				conditions: {
					id: null,
					username: null,
					problemId: "",
					result: "",
					language: "",
				},

				resultMapping: StatusService.resultMapping,
				languages: null,
			};
		},
		created() {
			this.contestId = this.$route.params.contestId || this.$route.query.contestId;

			this.conditions = {
				id: this.$route.query.id,
				username: this.$route.query.username,
				problemId: this.$route.query.problemId || "",
				result: this.$route.query.result || "",
				language: this.$route.query.language || "",
			};

			this.search();


			ConfigService.getLanguages().then(result => {
				this.languages = Object.freeze(result);
			});
		},
		components: {
			StatusList,
			Pagination,
		},
		methods: {
			getPageUrl(pageNumber, pageSize=PAGE_SIZE) {
				return Router.page.contest.status(this.contestId, pageNumber, pageSize);
			},
			search() {
				const status = this.showPagination ? ContestStatusService : StatusService;

				status.getPage(this.contestId, this.$route.query.pageNumber, this.$route.query.pageSize, this.conditions)
				.then(result => {
					if (this.showPagination) {
						this.pageInfo = pageInfo(result);
					}

					return result.list;
				}).then(solutions => {
					StatusService.processesWithoutFreeze(solutions);

					this.solutions = ProblemService.processes(solutions);
				});
			},
		}
	}
</script>

<style scoped>
</style>
